<!DOCTYPE html>
<script>
const sheet = new CSSStyleSheet();

sheet.replaceSync(`
  #parent {
    width: 200px;
    contain: layout style size;
  }

  @container size(min-width: 100px) {
    .item {
      font-size: 1px;
    }
  }

  #named-container {
    width: 300px;
    container-name: container-1;
    container-type: inline-size;
  }

  @container container-1 size(max-width: 300px) {
    .item {
      color: #abc;
    }
  }
`);

// Apply the stylesheet to a document:
document.adoptedStyleSheets = [sheet];
</script>
<div id="named-container">
  <div id="parent">
    <div class="item"></div>
  </div>
</div>
